<template>
    <div class="page-main">
        <h1 class="page-title">设置</h1>

        <div class="mt-2 function-header">
            <v-btn class="ms-4" color="primary" @click="FopApi.openDataFolder">
                <template v-slot:prepend>
                    <v-icon color="background">mdi-folder-cog-outline</v-icon>
                </template>
                打开配置目录
            </v-btn>
            <v-btn class="ms-4" color="primary" @click="reload">
                <template v-slot:prepend>
                    <v-icon color="background">mdi-cog-refresh-outline</v-icon>
                </template>
                刷新
            </v-btn>
        </div>

        <el-scrollbar class="mt-6 px-4 pb-6">
            <theme-settings></theme-settings>
            <shortcut-settings class="mt-8"></shortcut-settings>
            <author-info class="mt-8 mb-4"></author-info>
        </el-scrollbar>
    </div>
</template>

<script setup lang="ts">
import { FopApi } from "@/lib/api";
import ThemeSettings from "@/components/settings/ThemeSettings.vue";
import ShortcutSettings from "@/components/settings/ShortcutSettings.vue";
import AuthorInfo from "@/components/public/info/AuthorInfo.vue";

function reload() {
    window.location.reload();
}
</script>

<style scoped lang="scss">
.function-header {
    height: 64px;
    width: 100%;
    display: flex;
    flex-direction: row;
}
</style>
